<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>作用域插槽</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
        </style>
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>

        <div id="app">
            <my-button>
                <template v-slot:default="sp">
                    {{sp.text.register}}
                </template>
            </my-button>
            <hr>
            <my-button></my-button>
        </div>

        <script>
            const app = Vue.createApp({});

            app.component( 'MyButton' , {
                data(){
                    return { titles: { login: '登录' , register: '注册' } }
                },
                template: `<button> <slot :text="titles">{{titles.login}}</slot> </button>`
            });

            app.mount( '#app' );
        </script>

    </body>
</html>